<template>
  <div class="big">
    <div class="top">
      <i @click="url('/show')" class="iconfont icon-zuojiantou"></i>
      <span>美食</span>
      <!-- <i class="iconfont icon-icon--"></i> -->

      <van-popover
        placement="bottom-end"
        v-model="showPopover"
        theme="dark"
        trigger="click"
        :actions="actions"
      >
        <template #reference>
          <span class="iconfont icon-icon--" type="primary"></span>
        </template>
      </van-popover>
    </div>
    <navbar></navbar>
    <goodsList></goodsList>
  </div>
</template>

<script>
// 引入图标
import "@/assets/icons/iconfont.css";
import navbar from "./ui/navbar.vue";
import goodsList from "./ui/goodsList.vue";
// import { getQinList } from "@/api/list";
export default {
  components: {
    navbar,
    goodsList,
  },
  data() {
    return {
      list: [],
      showPopover: false,
      actions: [{ text: "首页" }, { text: "搜索" }, { text: "客服" },{ text: "反馈" },{ text: "我的" }],
    };
  },
  methods:{
    url( url ){
      this.$router.push(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.big {
  background-color: #f6f6f6;
}
.top {
  width: 100%;
  height: 44px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fe3c35;
  z-index: 99;
  span {
    color: white;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    margin-left: 150px;
  }
  .icon-zuojiantou {
    color: white;
    margin-left: 10px;
  }
  .icon-icon-- {
    color: white;
    font-size: 28px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
</style>